<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import{postWelcomeGroupList,postWelcomeDele} from '@/api'

import NewGWM from  './newgwm/newgwm.vue'

// 入群欢迎语列表页
const newgwmRef = ref(null)
const tangList = ref([])
const pageSize = ref('1')
const sizeCont = ref('10')
const contentList = ref('1')


const selectValue = ref('');
const searchValue = ref('');
const dialogVisible = ref(false);
const shownewgwm =ref(false)

const tableData = ref([])
const total = ref(0)
const page = ref(1)
const row = ref({})
const showDetail = (row1)=>{
  row._value = row1
  dialogVisible.value = true
}
const getData = (val)=>{
  if (val) page.value = val
  postWelcomeGroupList({
    page:page.value,size:10,content:searchValue.value
    }).then((res) => {
    // console.log(res.data)
        total.value = res.data.count
        tableData.value = res.data.item

    // console.log(aothList)
    })
}

getData()

const showClick =(item)=>{
  shownewgwm.value=!shownewgwm.value
  console.log(item)
  if(item){
    if(item.id){
    setTimeout(()=>{
      newgwmRef.value.show(item.id)
    },5)
     }
  }
    console.log('跳转',item.id)
    
    
}

const delClick = (id) => {
  open(id);
};

const open = (id) => {
  ElMessageBox.confirm(
    "删除欢迎语后会影响已使用该入群欢迎语的群聊，确定删除该入群欢迎语吗？",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    }
  )
    .then(async() => {
      const r = await postWelcomeDele({id:id})
      if (r){
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getData()
      }
      
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const showWelcome = () => {
  ElMessageBox.alert('入群欢迎语介绍', '入群欢迎语')
};

</script>

<template>
  <div v-if="!shownewgwm">
    <div class="topStyle">
      <p
        style="
          width: 1000px;
          padding-left: 20px;
          padding-top: 12px;
          font-size: 13px;
          color: #023d81;
        "
      >
        因企业微信接口限制，在【企业微信后台】群欢迎语素材库进行编辑或删除操作，此处不会同步更新
      </p>
    </div>
    <div class="table-operation">
      <div class="table-operation-left">
        <el-button type="primary" @click="showClick">新建入群欢迎语</el-button
        ><span style="margin-left: 20px;cursor: pointer;" @click="showWelcome">什么是入群欢迎语？</span>
      </div>
      <div class="table-operation-right">
        <!-- <span class="table-operation-label">入群欢迎语来源:</span>
          <el-select v-model="selectValue" clearable placeholder="全部" style="width:150px;margin-right:15px;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
          <el-input
            v-model="searchValue"
            class="w-50 m-2"
            placeholder="请输入要搜索的欢迎语(输入后回车)"
            :suffix-icon="Search"
            @keyup.enter.native="(val)=>getData()"
            style="width:200px;margin-right:15px;"
          />
          <el-button>重置</el-button>
      </div>
    </div>
    <!-- table -->
    <div class="public-container" style="padding: 15px;border-radius: 5px;">
      <div style="margin: 0 0 20px 20px;font-size: 14px; color: #666;font-weight: bold;">共6条素材</div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
			:cell-style="{ fontSize: '14px', padding: '20px 0' }">
        <el-table-column prop="Messagecontent" label="入群欢迎语">
          <template #default="scope">
            <div
              style="display: flex; align-items: center"
              v-if="scope.row.src !== ''"
            >
              <div>
                <div>消息1: {{scope.row.content}}</div>
                <div class="app-flex-left">
                  <span style="white-space:nowrap">消息2:</span>
                  
                  <el-avatar style="margin-left:8px;margin-right:8px" shape="square" size="80" :src="scope.row.welcome_data.imageurl||scope.row.welcome_data.link_picurl||scope.row.miniprogram_picurl
" />{{scope.row.welcome_data.link_title||scope.row.welcome_data.miniprogram_title
}}
                </div>
              </div>
            </div>
            
          </template>
        </el-table-column>
        <el-table-column prop="source" label="来源" width="100">
        <template #default="scope">
        {{scope.row.type==1?'入群欢迎语':''}}
         </template>
        </el-table-column>
        <el-table-column prop="send_status" label="类型"  width="100">
 <template #default="scope">
           {{scope.row.send_status==1?'提醒员工':'不提醒员工'}}
          </template>
        </el-table-column>

        <!-- <el-table-column prop="createdBy" label="创建人">
          <template #default="scope">
            <div class="app-words-box">
              <div class="app-flex-left">
                <MyIcon class="app-down-icon primary-font" name="Person" />
                <span class="app-gap-words-left-xs">{{
                  scope.row.Usemembers
                }}</span>
              </div>
            </div>
          </template>
        </el-table-column> -->

        <el-table-column prop="ctime" label="创建时间" width="170"/>
        <el-table-column prop="operation" label="操作" width="170">
          <template #default="scope">
            <ul class="tableOperation">
						  <li @click="showDetail(scope.row)">详情</li>
						  <li @click="showClick(scope.row)">修改</li>
              <li @click="delClick(scope.row.id)">删除</li>
					  </ul>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding-top:0px;padding-bottom:20px" :current-page="page" class="app-page" @current-change="getData" background layout="prev, pager, next" :total="total" />
      <!-- 详情弹窗页 -->
      <el-dialog
        v-model="dialogVisible"
        title="入群欢迎语素材详情"
        center
        :width="530"
      >
        <div style="display: flex; justify-content: flex-start">
          <div
            style="
              width: 3px;
              height: 15px;
              background-color: #1890ff;
              margin-right: 3px;
              margin-top: 4px;
            "
          ></div>
          <div>基本设置</div>
        </div>
        <div>
            <p style="margin:15px 0 10px 30px">类型:<span style="margin-left:5px">{{row.send_status==1?'提醒员工':'不提醒员工'}}</span></p>
            <!-- <p style="margin:15px 0 10px 15px">创建人:<div class="app-words-box" style="margin-left:5px">
              <div class="app-flex-left">
                <MyIcon class="app-down-icon primary-font" name="Person" />
                <span class="app-gap-words-left-xs">mayun </span>
              </div>
            </div></p> -->
            <p style="margin:15px 0 10px 0">创建时间:<span style="margin-left:5px">{{row.ctime}}</span></p>
        </div>
         <div style="display: flex; justify-content: flex-start">
          <div
            style="
              width: 3px;
              height: 15px;
              background-color: #1890ff;
              margin-right: 3px;
              margin-top: 4px;
            "
          ></div>
          <div>欢迎语设置</div>
         
        </div>
         <div class="WelcomeWordsStyle">
<div>消息1: {{row.content}}</div>
                <div class="app-flex-left">
                  <span style="white-space:nowrap">消息2:</span>
                  
                  <el-avatar style="margin-left:8px;margin-right:8px" shape="square" size="80" :src="row.welcome_data.imageurl||row.welcome_data.link_picurl||row.miniprogram_picurl
" />{{row.welcome_data.link_title||row.welcome_data.miniprogram_title
}}
                </div>
          </div>
      </el-dialog>
    </div>
  </div>
  <!-- 跳转newgwm页面 -->
  <NewGWM ref="newgwmRef" v-else  @goBack="shownewgwm=false;getData(1)"></NewGWM>
</template>
<style scoped="scss">
@import '../../../style/app-component.scss';
.topStyle {
  background-color: #e6f0ff;
  height: 45px;
  border: 1px solid #7db3f2;
  margin: 20px;
}
.CMtopStyleChildOne {
  display: flex;
  margin: 20px 20px 0 20px;
  justify-content: space-between;
}
.tableStyle {
  margin: 20px 20px;
}
.WelcomeWordsStyle{
    background-color: #fbfbfb;
    border: 1px solid #eeeeee;
    padding: 10px;

}
.table-operation{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  font-size: 14px;
  color: rgb(89, 89, 89);
}
.table-operation-left{
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgb(89, 89, 89);
}
.table-operation-right{
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgb(89, 89, 89);
}
.table-operation-label{
  width: 110px;

}
.public-container {
	margin: 20px 20px 0 20px;
	background: #fff;
	padding: 20px 0 0 0;
	border-radius: 10px;
}
.tableHeader {
	height: 40px;
	font-size: 14px;
	color: #909399;
	background: #f7f9fa;
}
.tableOperation {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tableOperation li {
	font-size: 14px;
	color: #409eff;
	border-right: 1px solid #ebebeb;
	padding: 0 10px;
	height: 14px;
	line-height: 14px;
	cursor: pointer;
}
.tableOperation li:hover {
	color: #a0cfff;
}
.tableOperation li:first-child {
	padding-left: 0;
}
.tableOperation li:last-child {
	border-right: none;
}
</style>
<style>
.el-page-header {
  display:none;
}
</style>
